<template>
  <div style="background: #F7F7F7;height: 100%;">
   <div style="padding-bottom: 1.4rem">
     <!--上部分-->
     <div style="background: #fff;">
       <!--登录-->
       <div class="enter">
         <p class="head" @click="mess()"><img :src="img" alt="" ></p>
         <div class="vipimg">
           <p @click="enter()">{{loginstatus}}</p>
           <p @click="enter()" v-show="dis">个人中心</p>
          <!-- <p v-if="obj.vip_level==1||obj.vip_level=='1'" @click="vipclick()"><img src="../../../src/assets/img/vipcon.png" alt=""></p>
           <p v-else-if="obj.vip_level==2||obj.vip_level=='2'" @click="vipclick()"><img src="../../../src/assets/img/subvipcon.png" alt=""></p> -->
           <p @click="enter()">赛思医考帮欢迎您的到来~</p>
         </div>
       </div>
       <!--关注收藏发布-->
       <div class="classify">
         <div @click="focus()">
           <p><img src="../../../src/assets/img/guanzhu.png" alt=""></p>
           <p>关注</p>
         </div>
         <div @click="collect()">
           <p><img src="../../../src/assets/img/shoucang.png" alt=""></p>
           <p>收藏</p>
         </div>
         <div @click="qianbao()">
           <p><img src="../../../src/assets/img/person/qianbao.png" alt=""></p>
           <p>钱包</p>
         </div>
       </div>
     </div>
		 
		 
		<div class="everyall">
		  <div class="everyitem mt-cel"  @click="classes()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/banji.png">
					</div>
					<div class="everytitle">我的班级</div>
				</div>
				<div class="leftpush">
					<img src="../../../src/assets/img/my-left.png">
				</div>
		  </div>
			
			<div class="everyitem"  @click="study()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/person/study.png">
					</div>
					<div class="everytitle">学习进度</div>
				</div>
				<div class="leftpush">
					<img src="../../../src/assets/img/my-left.png">
				</div>
			</div>
			<div class="everyitem"  @click="publish()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/person/fabu.png">
					</div>
					<div class="everytitle">发布的内容</div>
				</div>
				<div class="leftpush">
					<img src="../../../src/assets/img/my-left.png">
				</div>
			</div>
			
			<div class="everyitem"  @click="buy()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/person/buy.png">
					</div>
					<div class="everytitle">我的购买记录</div>
				</div>
				<div class="leftpush">
					<span v-if="obj.is_nopay==1||obj.is_nopay=='1'">你有订单未支付</span>
					<img src="../../../src/assets/img/my-left.png">
				</div>
			</div>
			
			<!-- <div class="everyitem mt-cel"  @click="kehu()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/person/kehu.png">
					</div>
					<div class="everytitle">我的推荐</div>
				</div>
				<div class="leftpush">
					<img src="../../../src/assets/img/my-left.png">
				</div>
			</div>
			
			<div class="everyitem mt-cel"  @click="zhuce()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/person/tuijian.png">
					</div>
					<div class="everytitle">推荐注册</div>
				</div>
				<div class="leftpush">
					<img src="../../../src/assets/img/my-left.png">
				</div>
			</div> -->
			
			<div class="everyitem mt-cel"  @click="lafeapp()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/leftapp.png">
					</div>
					<div class="everytitle">下载APP</div>
				</div>
				<div class="leftpush">
					<img src="../../../src/assets/img/my-left.png">
				</div>
			</div>
			<!-- <div class="everyitem mt-cel"  @click="help()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/person/help.png">
					</div>
					<div class="everytitle">帮助中心</div>
				</div>
				<div class="leftpush">
					<img src="../../../src/assets/img/my-left.png">
				</div>
			</div> -->
			
			<div class="everyitem"  @click="shezhi()">
				<div class="imgleft">
					<div class="itemimg">
						<img src="../../../src/assets/img/person/shezhi.png">
					</div>
					<div class="everytitle">设置</div>
				</div>
				<div class="leftpush">
					<img src="../../../src/assets/img/my-left.png">
				</div>
			</div>
		</div>
			
		 
		 <!-- 您已试看过该课程 -->
		 <!-- <div class="shoewr-chenshi">
		 	<div class="chen-contener chen-textactiveshi">
		 		<p class="chen-title">会员权益</p>
		 		<p class="chen-text" v-if="obj.vip_level==1||obj.vip_level=='1'">您是我们的VIP用户，在购买小七课程<span>(非实操课程)</span>将享受全部课程半价的权益.</p>
		 		<p class="chen-text" v-else>您是我们的超级VIP，在购买小七课程<span>(非实操课程)</span>将享受全部课程免费的权益.</p>
		 		<p class="chen-button-shiyes" @click="shishare()">确定</p>
		 	</div>
		 </div> -->
		 
		 <!-- 登录弹窗 -->
		 <div class="shoewr-chenhoupass">
		 	<div class="chen-contener chenpass">
		 		<p class="chen-title">提示</p>
		 		<p class="chen-text chen-textactive">您需要先登录?</p>
		 		<div class="chen-but">
		 			<p class="chen-but-no" @click="repeatclose1()">取消</p>
		 			<p class="chen-but-yes chen-but-yesactive" @click="enter()">去登录</p>
		 		</div>
		 	</div>
		 </div>
		 
		 <!-- 登录弹窗 -->
		 <div class="shoewr-chenhoupasslogin">
		 	<div class="chen-contener chenpass">
		 		<p class="chen-title">提示</p>
		 		<p class="chen-text chen-textactive">您的登录信息已经失效，请重新登录</p>
		 		<div class="chen-but">
		 			<p class="chen-but-no" @click="repeatclose()">取消</p>
		 			<p class="chen-but-yes chen-but-yesactive" @click="enter()">去登录</p>
		 		</div>
		 	</div>
		 </div>

   </div>
    <!--<Homepage :idx="3"></Homepage>-->
  </div>
</template>

<script>
  import { Indicator } from 'mint-ui';
    export default {
        name: "Personal",
      data(){
        return{
			imgSrc:require("../../assets/img/people.png"),
			imgSrc1:require("../../assets/img/person/people1.png"),
          obj:{},
          loginstatus:'点击登录',
          dis:false,
          dis1:false,
          img:'',
			token:localStorage.getItem('token'),
        }
      },
      methods:{
				repeatclose(){
					// $('.shoewr-chenhoupass').fadeOut();
					localStorage.clear();
					$('.shoewr-chenhoupasslogin').fadeOut();
				},
				repeatclose1(){
					$('.shoewr-chenhoupass').fadeOut();
					// $('.shoewr-chenhoupasslogin').fadeOut();
				},
				loginclo(){
					$('.shoewr-chenhoupass').fadeIn();
				},
				vipclick(){
					$('.shoewr-chenshi').fadeIn();
				},
				shishare(){
					$('.shoewr-chenshi').fadeOut();
				},
				// 下载app
				lafeapp(){
					this.$router.push({
					  path:'/appdown'
					})
				},
				// 帮助中心
				// help(){
				// 	this.$router.push({
				// 	  path:'/ofterquestion'
				// 	}) 
				// },
        publish(){
         if (localStorage.getItem('token')) {
            this.$router.push({
              path:'/publish'
            })
          }else{
			     this.loginclo();
          }
        },
        kehu(){
           if (localStorage.getItem('token')) {
            this.$router.push({
              path:'/kehu'
            })
          }else{
			     this.loginclo();
          }
        },
        xiaoxi(){
          if (localStorage.getItem('token')) {
            this.$router.push({
              path:'/xiaoxi'
            })
          }else{
			this.loginclo();
          }
        },
        study(){
          if (localStorage.getItem('token')) {
            this.$router.push({
              path:'/study'
            })
          }else{
			this.loginclo();
          }
        },
        zhuce(){
           if (localStorage.getItem('token')) {
            this.$router.push({
              path:'/zhuce'
            })
          }else{
			this.loginclo();
          }
        },
        shezhi(){
          this.$router.push({
            path:'/shezhi'
          })
        },
        kefu(){
          window.location.href = 'tel://13298107772'
        },
        enter() {
// 					var url = window.location.href;
// 					console.log(url);
            //判断是否在微信中打开
            var ua = navigator.userAgent.toLowerCase();
            var isWeixin = ua.indexOf('micromessenger') != -1;
						var mainpath = this.$store.state;
						// var href = mainpath.url+'User/WechatLogin?to='+mainpath.rouchpath+'&route=ge&fromsource=1';
						// console.log(href);
						if(localStorage.getItem('token')){
							this.$router.push({
								path:'/center'
							})
						}else{
							this.d();
					
            }
          },

        message(){
          this.$router.push({
            path:'/center'
          })
        },
        mess(){
			    this.enter();
        },
        classes(){
          if (localStorage.getItem('token')) {
            this.$router.push({
              path:'/myclass'
            })
          }else{
			      this.loginclo();
          }
        },
        focus(){
          if (localStorage.getItem('token')) {
            this.$router.push({
              path:'/focus'
            })
          }else{
			this.loginclo();
		  }
        },
        collect(){
          if (localStorage.getItem('token')) {
            this.$router.push({
              path: '/collect'
            })
          }else{
				this.loginclo();
			}
        },
        qianbao(){
           if (localStorage.getItem('token')) {
            this.$router.push({
              path: '/qianbao'
            })
          }else{
				this.loginclo();
			}
        },
        buy(){
          if (localStorage.getItem('token')) {
            this.$router.push({
              path: '/buy'
            })
          }else{
				this.loginclo();
			}
        },
		getUserInfo(){
			if(localStorage.getItem('token')){
			  this.axios.defaults.headers.common['token'] = localStorage.getItem('token');
			}else{
				this.axios.defaults.headers.common['token'] = '';
			}
			this.axios.get(this.$store.state.url + "User/getUserInfo").then(res=>{
			  // console.log(res.data)
			  if (res.data.errcode == 0||res.data.errcode == '0'){
				// console.log(res.data)
				// Indicator.close();
				//判断手机号是否为空
				var data = res.data.data;
				  this.obj = data;
				  //头像显示
				  // this.img = 'static/img/people.png'
				  //两个的显示隐藏
				  this.dis = true;
				  this.dis1 = true;
				  //保存 openid
						// is_band_wechat 是否绑定微信 0否 1是    is_band_qq 是否绑定QQ
				  if (data.is_band_wechat==1||data.is_band_wechat=='1'){
							this.img = data.avatar;
							this.loginstatus = data.nickname;
				  }else if(data.is_band_qq==1||data.is_band_qq=='1'){
							this.img = data.avatar1;
							this.loginstatus = data.nickname1;
						}else{
							this.img = this.imgSrc;
							var tel = data.tel;
							this.loginstatus = tel.substr(0,3) + "****" + tel.substr(7);
						}
			
			  }else if(res.data.errcode == 10002||res.data.errcode == '10002'){
					localStorage.clear();
					$('.shoewr-chenhoupasslogin').fadeIn();
				}else {
				this.dis = false;
				this.dis1 = false;
			  }
			})
		}
      },
			watch:{
				token(){
					// console.log(888);
					this.getUserInfo();
				}
			},
      mounted() {
		  
		  // this.sharelogin();
		  this.sdk.getJSSDK('','',this.$store.state.url);
		  
		  
		  this.loginsuccess();
		  
		  

        if (localStorage.getItem('token')){
          //保存一下openid
					// 移除登录次数
          sessionStorage.removeItem('numbers');
          this.getUserInfo();
        }else {
          this.img =this.imgSrc1;
        }
      },

    }
</script>

<style scoped>
	.everyall{
		padding-bottom: 1rem;
	}
	.mt-cel{
		margin-top:.2rem;
	}
	.everyitem{
		 height: .9rem;
		line-height: .9rem; 
		display: flex;
		justify-content: space-between;
		padding: 0rem .3rem;
		background: #fff;
	}
	.imgleft{
		display: flex;
		justify-content: flex-start;
	}
	.imgleft .itemimg{
		width: .32rem;
		height: .32rem;
	}
	.imgleft  img{
		width: 100%;
		height: 100%;
		vertical-align: middle !important;
	}
	.everytitle{
		color: #333333;
		font-size: .3rem;
		margin-left: .31rem;
	}
	.leftpush span{
		color: #FE3434;
		font-size: .26rem;
		display: inline-block;
		margin-right: .1rem;
	}
	.leftpush img{
		width: .1rem;
		height: .2rem;
		vertical-align: middle !important;
	}
	#isnopay{
		color: #FE3434 !important;
		font-size: .26rem !important;
	}
  .mint-cell{
    min-height: 0.9rem!important;
  }
    .enter{
      width: 92%;
      height: 1.96rem;
      margin: auto;
      border-bottom: 0.01rem solid rgba(237,237,237,1);
      overflow: hidden;
    }
		.vipimg img{
			width: 1.48rem;
			height: .37rem;
		}
   .head{
      width: 1.36rem;
      height: 1.36rem;
			margin-top: 0.3rem;
			margin-left: 0.1rem;
    float: left;
  }
   .head img{
     width: 100%;
     border-radius: 50%;
     height: 100%;
   }
   .enter div{
     margin-top: 0.5rem;
     margin-left: 0.29rem;
     float: left;
   }
  .enter div p:nth-child(1){
		width: 3rem;
    /* height:0.34rem; */
    font-size: 0.35rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
  }
    .enter div p:nth-child(2){
      /* width:1.7rem; */
      height:0.44rem;
			padding: 0 .3rem;
      background:rgba(194,201,211,1);
      opacity:0.3;
      border-radius:0.22rem 0 0 0.22rem;
      font-size: 0.24rem;
      text-align: center;
      line-height: 0.44rem;
      position: absolute;
      top: 0.55rem;
      right: 0;
    }
    .enter div p:nth-child(3){
      font-size: 0.24rem;
      color: #C2C9D3;
      margin-top: 0.25rem;
    }
    .classify{
      height: 1.45rem;
      display: flex;
      justify-content: space-around;
    }
    .classify div{
      width: 0.8rem;
     height: 100%;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
    }
  .classify div img{
   width: 0.56rem;
  }
  .classify div p{
    width: 100%;
    font-size: 0.28rem;
  }
  .bto{
    margin-top: 0.2rem;
    background: #fff;
  }
</style>
